<!-- 账号管理 -->
<template>
<div class="content-box">
  <div v-if="data.is_admin===1" class="midContant clearfix">
    <span style="text-align: right" class="Span borderR borderB"
      >{{$t('CustomerManagementLang.Name')}}:</span
    >
    <span style="width: 37.5%;" class="Span borderR borderB  contant">
      <el-input
        ref="name"
        @blur="handleBlur('name',$event)"
        @focus="handleFocus($event)"
        class="Required"
        :placeholder="$t('common.input_plactholder')"
        v-model="data.name"
      ></el-input>
    </span>
    <span style="text-align: right" class="Span borderR borderB"
      >{{$t('AccountLang.phone_number')}}:</span
    >
    <span class="Span borderR borderB contant">
      <el-input
        :placeholder="$t('common.input_plactholder')"
        v-model="data.mobile"
      ></el-input>
    </span>
    <span style="text-align: right" class="Span borderR borderB"
      >{{$t('AccountLang.mailbox')}}:</span
    >
    <span class="Span borderB  contant">
      <el-input
        :placeholder="$t('common.input_plactholder')"
        v-model="data.email"
      ></el-input>
    </span>
    <span style="text-align: right" class="Span borderR borderB"
      >{{$t('AccountLang.Invitation_code')}}:</span
    >
    <span class="Span borderR borderB contant">
      <el-input
        disabled
        v-model="data.invite_code"
      ></el-input>
    </span>
    <span style="text-align: right" class="Span borderR borderB"
      >{{$t('AccountLang.Account_KEY')}}:</span
    >
    <span class="Span borderR borderB  contant">
      <el-input
        disabled
        v-model="data.account_key"
      ></el-input>
    </span>
    <span style="text-align: right" class="Span borderR borderB"
      >{{$t('AccountLang.Email_KEY')}}:</span
    >
    <span class="Span borderR borderB contant">
      <el-input
        :placeholder="$t('common.input_plactholder')"
        v-model="data.email_account"
      ></el-input>
    </span>
    <span style="text-align: right" class="Span borderR borderB"
      >{{$t('AccountLang.Email_KEY1')}}:</span
    >
    <span class="Span borderB contant">
      <el-input
        :placeholder="$t('common.input_plactholder')"
        v-model="data.email_password"
      ></el-input>
    </span>
    <span style="text-align: right" class="Span borderR borderB"
      >{{$t('AccountLang.SMS_key')}}:</span
    >
    <span class="Span borderR borderB  contant">
      <el-input
        :placeholder="$t('common.input_plactholder')"
        v-model="data.sms_accesskeyid"
      ></el-input>
    </span>
    <span style="text-align: right" class="Span borderR borderB"
      >{{$t('AccountLang.SMS_key1')}}:</span
    >
    <span class="Span borderR borderB  contant">
      <el-input
        :placeholder="$t('common.input_plactholder')"
        v-model="data.sms_accesskeysecret"
      ></el-input>
    </span>
    <span style="text-align: right" class="Span borderR borderB"
      >{{$t('AccountLang.Short_term_header')}}:</span
    >
    <span class="Span borderR borderB contant">
      <el-input
        :placeholder="$t('common.input_plactholder')"
        v-model="data.send_info_header"
      ></el-input>
    </span>
    <span style="text-align: right" class="Span borderR borderB"
      >{{$t('AccountLang.tips')}}:</span
    >
    <span class="Span borderB  contant">
      <el-input
        ref="tips"
        @blur="handleBlur('tips',$event)"
        @focus="handleFocus($event)"
        class="Required"
        :placeholder="$t('common.input_plactholder')"
        v-model="data.tips"
      ></el-input>
    </span>
    <span style="text-align: right;height:100px;" class="Span borderB borderR"
      >{{$t('AccountLang.Change_password')}}:</span
    >
    <span style="height:100px;justify-content: center;" class="Span borderB borderR contant">
      <el-input
        style="-webkit-text-security:disc"
        :placeholder="$t('common.input_plactholder')"
        v-model="data.password"
      ></el-input>
    </span>
    <span style="text-align: right;height:100px;" class="Span borderB borderR"
      >{{$t('AccountLang.LOGO')}}:</span
    >
    <span style="height:100px;justify-content: center;" class="Span borderB borderR contant">
      <UploadImg
        :maxSize="50"
        ref="logo"
        @FileList="setFileList"
      ></UploadImg>
    </span>
    <span style="text-align: right;height:100px;" class="Span borderB borderR"
      >{{$t('AccountLang.Background_image')}}:</span
    >
    <span style="height:100px;justify-content: center;" class="Span borderB borderR contant">
      <UploadImg
        ref="bg_cover"
        :maxSize='1000'
        @FileList="setFileList1"
      ></UploadImg>
    </span>
    <span style="text-align: right;height:100px;" class="Span borderB borderR"
      >{{$t('AccountLang.profile_picture')}}:</span
    >
    <span style="height:100px;justify-content: center;" class="Span borderB contant">
      <UploadImg
        :maxSize="50"
        ref="avatar"
        @FileList="setFileList2"
      ></UploadImg>
    </span>
    <span style="justify-content: center; width:100%" class="Span contant">
      <el-button type="primary" @click="confirm" size="small"
        >{{$t('common.confirm')}}</el-button
      >
      <el-button @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
    </span>
  </div>
  <div v-else class="midContant clearfix">
    <span style="text-align: right" class="Span borderR borderB "
      >{{$t('AccountLang.name')}}:</span
    >
    <span class="Span borderR borderB   contant">
      <el-input
        ref="name"
        @blur="handleBlur('name',$event)"
        @focus="handleFocus($event)"
        class="Required"
        :placeholder="$t('common.input_plactholder')"
        v-model="data.name"
      ></el-input>
    </span>
    <span style="text-align: right" class="Span borderR borderB "
      >{{$t('AccountLang.phone_number')}}:</span
    >
    <span class="Span borderR borderB  contant">
      <el-input
        disabled
        :placeholder="$t('common.input_plactholder')"
        v-model="data.mobile"
      ></el-input>
    </span>
    <span style="text-align: right" class="Span borderR borderB "
      >{{$t('AccountLang.mailbox')}}:</span
    >
    <span class="Span borderR borderB   contant">
      <el-input
        :placeholder="$t('common.input_plactholder')"
        v-model="data.email"
      ></el-input>
    </span>
    <span style="text-align: right" class="Span borderR borderB "
      >{{$t('AccountLang.Invitation_code')}}:</span
    >
    <span class="Span borderB contant">
      <el-input
        disabled
        v-model="data.invite_code"
      ></el-input>
    </span>
    <span style="text-align: right;height:100px;" class="Span borderR"
      >{{$t('AccountLang.Change_password')}}:</span
    >
    <span style="height:100px;" class="Span borderR contant">
      <el-input
        style="-webkit-text-security:disc"
        :placeholder="$t('common.input_plactholder')"
        v-model="data.password"
      ></el-input>
    </span>
    <span style="text-align: right;height:100px;" class="Span borderR"
      >{{$t('AccountLang.profile_picture')}}:</span
    >
    <span style="height:100px;justify-content: center;" class="Span borderR contant">
      <UploadImg
        :maxSize="50"
        ref="avatar"
        @FileList="setFileList2"
      ></UploadImg>
    </span>
    <span style="justify-content: center; width:20%;height:100px;" class="Span contant">
      <el-button type="primary" @click="confirm" size="small"
        >{{$t('common.confirm')}}</el-button
      >
      <el-button @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
    </span>
  </div>
  <FilterBox
    style="min-height: 38px;"
    :labelWidth="120"
    :buttonGroupArr="['refresh','keep']"
    @keep="keepHeaderList"
    @refresh="getTableData"
  >
  </FilterBox>
  <MyTable
  ref="aaaa"
    :tableColumn="tableColumn"
    :tableData="tableData"
    @setOrder="setOrder"
    @sendCurrentData="setCurrent"
    >
    <template v-slot:content="scope">
      <span>{{ scope.row[scope.config.prop] }}</span>
    </template>
  </MyTable>
  <!-- 分页组件 -->

  <Pagination
    :currentPage="pageinfo.page"
    :pageSize="pageinfo.limit"
    :total="pageinfo.number_all"
    :page_all="pageinfo.page_all"
    @pagination="SetPagination"
    @sendPushButton="pushButton"
  >
  </Pagination>

  <Add
    @success="getTableData"
    ref="add"
  ></Add>
  <Edit
    @success="getTableData"
    ref="edit"
  ></Edit>
</div>
</template>

<script>
import { validateEmail } from '@/utils/func.js'
import UploadImg from "../../components/common/upload_Img";
import Add from "./Account_add";
import Edit from "./Account_edit";
export default {
  components: {
    UploadImg,
    Add,
    Edit,
  },
  data(){
    return{
      filterData:{
        page: "",
        limit: "30",
        order: "",
      },
      data: {
      },
      tableColumn: [
        {
          label: "",
          prop: "table_code",
          width:40,
        },
        {
          checked: true,
          label: this.$t('CustomerManagementLang.consignee_name'),
          prop: "recive_user",
          width: 160,
          order:"",
        },
        {
          checked: true,
          label: this.$t('CustomerManagementLang.consignee_phone'),
          prop: "recive_phone",
          width: 160,
          order:"",
        },
        {
          checked: true,
          label: this.$t('CustomerManagementLang.consignee_region'),
          prop: "recive_addr",
          width: 160,
          order:"",
        },
      ],
      tableData: [],
      confirmTrue:true,//确定按钮保护
      
      pageinfo: {
        page: 1,
        page_all: 1,
        limit: 30,
        number_all: 0,
      },
      sendDataObj:{},
    }
  },
  computed: {
      tabsId() {
          return this.$store.state.tabsId;
      }
  },
  mounted(){
    this.getHeaderList()
    this.getTableData()
    this.getData()
  },
  methods:{
    //获取单条
    getData() {
      this.$get("memberinfo").then((res) => {
        this.data = res.data;
        if(this.data.is_admin===1){
          this.$nextTick(()=>{
            if(res.data.logo.length>0){
              this.$refs.logo.setImageUrl(this.$baseUrl+res.data.logo)
            }
            if(res.data.bg_cover.length>0){
              this.$refs.bg_cover.setImageUrl(this.$baseUrl+res.data.bg_cover)
            }
          })
        }
        this.$nextTick(()=>{
          if(res.data.avatar.length>0&&res.data.avatar!='/member_default.png'){
            this.$refs.avatar.setImageUrl(this.$baseUrl+res.data.avatar)
          }
        })
      });
    },
    setFileList(val){
      this.data.logo=val.raw
      if(!!this.data.logo){
        this.$refs.logo.$el.getElementsByClassName('el-upload')[0].style.border='1px solid #E0E3E9'
      }
    },
    setFileList1(val){
      this.data.bg_cover=val.raw
      if(!!this.data.bg_cover){
        this.$refs.bg_cover.$el.getElementsByClassName('el-upload')[0].style.border='1px solid #E0E3E9'
      }
    },
    setFileList2(val){
      this.data.avatar=val.raw
      if(!!this.data.avatar){
        this.$refs.avatar.$el.getElementsByClassName('el-upload')[0].style.border='1px solid #E0E3E9'
      }
    },
    // 提交
    confirm() {
      //是否有空值必选项标识
      let type = true;
      //输入框判断是否有值
      if(this.data.is_admin===1){
        if(!this.data.tips){
          this.$refs.tips.$el.childNodes[1].style.border='1px solid red'
          type=false
        }
      }
      if(!this.data.name){
        this.$refs.name.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if(!this.data.email&&!this.data.mobile){
        this.$message.warning(this.$t('AccountLang.message'));
        type=false
      }
      if(!!this.data.email){
        if(!validateEmail(this.data.email)){
          this.$message.warning(this.$t('AccountLang.message_email'));
          type=false
        }
      }
      if (type && this.confirmTrue) {
          this.confirmTrue=false
          window.setTimeout(()=>{
            this.confirmTrue=true
          },1000);
          let params = new FormData();
          params.append("uid", this.data.uid);
          if(this.data.is_admin===1){
            params.append("account_key", this.data.account_key);
            params.append("email_account", this.data.email_account);
            params.append("email_password", this.data.email_password);
            params.append("sms_accesskeyid", this.data.sms_accesskeyid);
            params.append("sms_accesskeysecret", this.data.sms_accesskeysecret);
            params.append("send_info_header", this.data.send_info_header);
            params.append("tips", this.data.tips);
            params.append("logo", this.data.logo);
            params.append("bg_cover", this.data.bg_cover);
          }
          params.append("name", this.data.name);
          params.append("mobile", this.data.mobile);
          params.append("email", this.data.email);
          params.append("invite_code", this.data.invite_code);
          params.append("avatar", this.data.avatar);
          if(this.data.password.trim().length>0){
            params.append("password", this.data.password);
          }
          this.$postForm("memberEdit", params).then((res) => {
            this.confirmTrue = true;
            if(res.success){
              this.$message.success(res.msg);
              this.$emit("success");

              let userDataCopy=JSON.parse(sessionStorage.getItem('userData'))
              userDataCopy.tips=res.data.tips
              userDataCopy.logo=res.data.logo
              userDataCopy.bg_cover=res.data.bg_cover
              userDataCopy.avatar=res.data.avatar
              sessionStorage.setItem('userData',JSON.stringify(userDataCopy))

              document.title=JSON.parse(sessionStorage.getItem('userData')).tips
              document.querySelector('link[rel ="shortcut icon"]').href=this.$baseUrl+JSON.parse(sessionStorage.getItem('userData')).logo
              document.getElementById('circle').getElementsByTagName('img')[0].src=this.$baseUrl+JSON.parse(sessionStorage.getItem('userData')).avatar
              document.getElementById('footerTitle').innerText=JSON.parse(sessionStorage.getItem('userData')).tips
            }
          });
        }
    },
    //取消
    cancel() {
      let dom = document.getElementsByClassName("el-input__inner");
      for (let i = 0; i < dom.length; i++) {
         dom[i].style.border = "1px solid #E0E3E9";
      }
      let domUpload = document.getElementsByClassName("el-upload");
      for (let i = 0; i < domUpload.length; i++) {
         domUpload[i].style.border = "1px dashed #E0E3E9";
      }
    },
    //输入框、下拉框失去焦点边框变色
    handleBlur(name, event) {
      if (!this.data[name]&&this.data[name]!==0) {
        event.target.style.border = "1px solid red";
      }
    },
    //输入框、下拉框获取焦点边框变色
    handleFocus(event) {
      event.target.style.border = "1px solid #E0E3E9";
    },
    // 获取表头组
    getHeaderList(){
      this.$get("get_th",{menu_id:this.tabsId}).then((res) => {
        if(!!res.data.th_json){
          this.tableColumn=JSON.parse(res.data.th_json)
        }
      });
    },
    //保存表头表头组
    keepHeaderList(){
        let params = new FormData();
        params.append("menu_id", this.tabsId);
        params.append("th_json", JSON.stringify(this.tableColumn));
        this.$postForm("save_th", params).then((res) => {
          
        });
    },
    // 点击排序
    setOrder(data){
      this.filterData.order=data
      this.getTableData()
    },
    // 更改分页
    SetPagination(data){
      this.filterData.page=data.page
      this.filterData.limit=data.limit
      this.pageinfo.page=data.page
      this.pageinfo.limit=data.limit
      this.getTableData()
    },
    pushButton(route) {

      if (route == "add") {
        this.$refs.add.init();
      } else if (route == "edit") {
        if (JSON.stringify(this.sendDataObj) == "{}" || this.sendDataObj == null) {
          this.$message.warning(this.$t('common.message_warn_text'));
        } else {
          this.$refs.edit.init(this.sendDataObj);
        }
      } else if (route == "del") {
        if (JSON.stringify(this.sendDataObj) == "{}") {
          this.$message.warning(this.$t('common.message_warn_text'));
        } else {
          let params = new FormData();
          params.append("id", this.sendDataObj.id);
          this.$postForm("reciveDel", params).then((res) => {
            if(res.success){
              this.$message.success(res.msg);
              this.getTableData();
            }
          });
        }
      }
    },
    // 获取表格数据
    getTableData(){
      this.$get("memberRecives", this.filterData).then((res) => {
        this.tableData = res.data;
        this.pageinfo = res.pageinfo;
        this.pageinfo.limit=Number(this.pageinfo.limit)
        this.sendDataObj={}
      });
    },
    setCurrent(data){
      this.sendDataObj=data
    },
  }
}
</script>
<style scoped lang="less">
.tableBox {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.midContant {
  min-width: 1000px;
  margin-bottom: 15px;
  .Span{
    width: 12.5%;
  }
}
.nowContant .Span {
    width: 10%;
}
</style>